import { fetchTreeList, delObj, dictItemList, delItemObj } from '@api/sys/dict'
import { treeDataTranslate } from '@/utils/util'
import DictItemAddOrUpdate from './dictItemAddOrUpdate'
import DictAddOrUpdate from './dictAddOrUpdate'
export default {
  name: 'DictTreeJsx',
  components: {
    DictItemAddOrUpdate,
    DictAddOrUpdate
  },
  data () {
    return {
      dictTree: [],
      columns: [
        {
          title: '名称',
          dataIndex: 'itemText'
        },
        {
          title: '代码',
          dataIndex: 'itemCode'
        },
        {
          title: '类型',
          dataIndex: 'type'
        }, {
          title: '操作',
          customRender: (record) => {
            return (
              <div>
                <a
                  onClick={(e) => this.edit(record)}
                >编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm title="是否删除字典" onConfirm={(e) => this.delete(record)} okText="是" cancelText="否">
                  <a-icon slot="icon" type="question-circle-o" style="color: red" />
                  <a style="color: red"
                  >删除</a>
                </a-popconfirm>
              </div>
            )
          }
        }
      ],
      tableData: [],
      loading: false,
      queryParam: {
        dictId: ''
      }
    }
  },
  methods: {
    init () {
      fetchTreeList().then(res => {
        this.dictTree = treeDataTranslate(res.data, 'id', 'name')
      })
      dictItemList().then(res => {
        this.tableData = res.data.records
      })
    },
    // 点击加载table
    handleClick (id) {
      if (id.length === 0) {
        return
      }
      this.queryParam.dictId = id[0]
      this.initItem({ dictId: id[0] })
    },
    // 搜索
    onChange (value) {
      console.log(value)
    },
    delete (record) {
      delItemObj(record.id).then(res => {
        this.$message.info('删除成功')
        this.initItem({ dictId: this.queryParam.dictId })
      })
    },
    initItem (params) {
      dictItemList(params).then(res => {
        this.tableData = res.data.records
      })
    },
    edit (record) {
      this.$refs.dictItemAddOrUpdate.edit(record.id, this.queryParam.dictId, 'edit')
    },
    handleOk () {
      this.initItem({ dictId: this.queryParam.dictId })
    }
  },
  created () {
    this.init()
  },
  render () {
    return (
      <a-card bordered={false}>
        <a-row gutter={8}>
          <a-col span={5}>
            <a-row gutter={8} style="margin-bottom: 8px">
              <a-col span="9">
                <a-button type="primary" icon="plus"
                  onClick={() => this.$refs.dictAddOrUpdate.edit('', 'add')}>添加字典
                </a-button>
              </a-col>
              <a-col span="9">
                <a-dropdown>
                  <a-menu slot="overlay">
                    <a-menu-item key="1" onClick="editDict">编辑字典</a-menu-item>
                    <a-menu-item key="2" onClick="delDict">删除字典</a-menu-item>
                    <a-menu-item key="3" onClick="refreshDict">刷新</a-menu-item>
                  </a-menu>
                  <a-button style="margin-left: 8px">更多操作 <a-icon type="down" /></a-button>
                </a-dropdown>
              </a-col>
            </a-row>

            <a-input-search style="margin-bottom: 8px" placeholder="Search" onSearch={this.onChange} />
            <a-tree
              treeData={this.dictTree}
              onSelect={this.handleClick}
            />
          </a-col>
          <a-col span="1"/>
          <a-col span={18}>
            {
              this.queryParam.dictId
                ? <div className="table-operator" style="margin-bottom: 8px">
                  <a-button type="primary" icon="plus"
                    onClick={() => this.$refs.dictItemAddOrUpdate.edit('', this.queryParam.dictId, 'add')}>新建
                  </a-button>
                </div>
                : null
            }
            <a-table
              columns={this.columns}
              dataSource={this.tableData}
              loading={this.loading}
              rowKey={record => record.id}
              pagination={false}
            />
          </a-col>
        </a-row>
        <dict-item-add-or-update
          ref="dictItemAddOrUpdate"
          onOk={this.handleOk}
        />
        <dict-add-or-update
          ref="dictAddOrUpdate"
          onOk={this.init}
        />
      </a-card>
    )
  }
}
